<template>
  <layout :showBg="false">
    <template #header>
      <pageHead title="账户注销" />
    </template>
    <view class="content">
      <template v-if="idx == 1">
        <view class="tip t-center fs-28"
          >账号注销后，以下信息将被清空，无法找回</view
        >
        <view class="tip-info">
          <view class="item flex" v-for="(item, index) in tips" :key="index">
            <view class="dot flex flex-a">
              <view class="inner"></view>
            </view>
            <text class="name c-60 fs-32">{{ item }}</text>
          </view>
        </view>
        <view class="active-btn btn" @click="idx = 2">我了解风险，继续</view>
      </template>
      <template v-else>
        <view class="second">
          <view class="title t-center bold">验证已绑定手机</view>
          <view class="s-tip t-center fs-32 c-60">
            以发送验证码至+86 {{ phone }}
          </view>
          <view class="code flex flex-a">
            <u-input
              type="number"
              placeholder="输入验证码"
              prefixIcon="phone"
              prefixIconStyle="font-size: 44rpx;color: #909399"
              class="phone input-item"
              v-model="code"
            >
              <view slot="prefix">
                <u-icon name="kefu-ermai"></u-icon>
              </view>
            </u-input>
            <view
              @click="onGetCode"
              :class="time != 59 ? 'code-btn-disabled' : ''"
              class="code-btn t-center active-btn code-btn fs-32"
              >{{ btnText }}</view
            >
          </view>
          <view @click="onLogoff" class="active-btn submit-btn">提交</view>
        </view>
      </template>
    </view>
  </layout>
</template>
<script>
import layout from "../../../compennts/layout/index.vue";
import pageHead from "../../../compennts/pageHead/index.vue";
import { getLocalUserInfo } from "../../../assets/utils";
import { getCode, logoff } from "../../../api/auth";

export default {
  components: {
    layout,
    pageHead,
  },
  data() {
    return {
      name: "",
      id: "",
      idx: 1,
      userinfo: null,
      time: 59,
      timer: null,
      btnText: "获取验证码",
      code: "",
      tips: [
        "各项推广数据",
        "账号信息、达人身份及相关权益",
        "数据记录",
        "我的钱包数据",
        "我的邀请数据",
        "其他更多信息其他更多信息其他更多信息其他更多信息其他更多信息其他更多信息",
      ],
    };
  },
  computed: {
    phone() {
      let p = this.userinfo.mobile;
      return p.substring(0, 3) + "****" + p.substring(7, 11);
    },
  },
  onShow() {
    this.userinfo = getLocalUserInfo();
  },
  onBackPress({ from }) {
    console.log(from, "back");
    console.log(this.idx);
    if (this.idx == 2) {
      this.idx = 1;
      return true;
    }
    return false;
  },
  methods: {
    onGetCode() {
      if (this.time != 59) return;
      if (this.timer && this.time != 59) clearInterval(this.timer);
      getCode({
        mobile: this.userinfo.mobile,
      }).then((res) => {
        console.log("code", res);
        this.btnText = this.time + "s";
        uni.showToast({
          icon: "none",
          title: "验证码已发送",
          duration: 3000,
        });
        this.timer = setInterval(() => {
          this.time--;
          if (this.time == 0) {
            this.btnText = "获取验证码";
            clearInterval(this.timer);
            this.time = 59;
          } else {
            this.btnText = this.time + "s";
          }
        }, 1000);
      }).catch(() => {
          clearInterval(this.timer);
          this.time = 59;
        });
    },
    onLogoff() {
      logoff({ verifyCode: this.code }).then(() => {
        uni.showToast({
          title:'注销成功',
          icon:'none',
        })
        uni.removeStorageSync('token')
        uni.removeStorageSync('refreshToken', '')
        uni.removeStorageSync('userInfo', '')
        uni.switchTab({
          url: "/pages/mine/index",
        });
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../../assets/styles/common.less");
.content {
  background: #f7f8ff;
  min-height: 100%;
  padding: 32rpx;
  position: relative;
  .tip {
    background: #fff4f1;
    color: #f36343;
    padding: 4rpx 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
  .tip-info {
    margin-top: 80rpx;
    padding: 32rpx 50rpx;
    background: #fff;
    border-radius: 16rpx;
    .item {
      margin-bottom: 24rpx;
      .name {
        line-height: 48rpx;
      }
      .dot {
        height: 48rpx;
        .inner {
          width: 12rpx;
          height: 12rpx;
          background: #567bfc;
          border-radius: 50%;
          margin-right: 26rpx;
          flex-shrink: 0;
        }
      }
    }
  }
  .btn {
    height: 88rpx;
    margin-top: 64rpx;
  }
  .second {
    padding-top: 160rpx;
    .title {
      font-size: 48rpx;
    }
    .s-tip {
      margin-top: 32rpx;
    }
    .code {
      margin-top: 48rpx;
    }
    .input-item {
      background: #fff;
      height: 88rpx;
      margin-right: 32rpx;
    }
    .code-btn,
    .submit-btn {
      height: 88rpx;
      padding: 0 32rpx;
    }
    .code-btn {
      width: 224rpx;
      &.code-btn-disabled {
        opacity: 0.5;
      }
    }
    .submit-btn {
      margin-top: 64rpx;
    }
  }
}
</style>
